<template>
  <div class="c-fs20 c-fc-sblack" v-if="modeleMapInfo">
    <member-basic :baseConf="baseConf" :vipTypeNum="vipTypeNum" :modeleMapInfo="modeleMapInfo" :memberInfo="memberInfo" :vipType="vipType"  :isiOS="isiOS" :isYouke="isYouke" :isAnApp="isAnApp" :vipEndTime="vipEndTime" :svipEndTime="svipEndTime" :enableIosRecharge="enableIosRecharge"></member-basic>
    <div class="c-ph24 c-bg-sgray" :class="baseConf.styleType == 1 || baseConf.styleType == 4 ? 'c-pt20' : ''">
      <!-- 收藏 积分 虚拟币 账户 -->
      <div class="c-flex-row c-pv28 c-bg-white c-mb20 c-br16 c-pr16" v-if="assetManagement && assetManagement.status == 1">
        <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1" v-if="assetManagementShowItem('AS_COLLECTION')" @click="clickMyCollection">
          <div class="c-fs26 c-fw-b c-fc-xblack">{{modeleMapInfo.collectNum > 99 ? '99+' : modeleMapInfo.collectNum}}</div>
          <div class="c-fs20 c-pt12">收藏</div>
        </div>
        <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1" v-if="modeleMapInfo.enablePoints && isShowSign == true && assetManagementShowItem('AS_POINTS')" @click="clickIntegral">
          <div class="c-fs26 c-fw-b c-fc-xblack">{{Number(modeleMapInfo.myPoints)}}</div>
          <div class="c-fs20 c-pt12">{{ customPointName }}</div>
        </div>
        <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1" v-if="modeleMapInfo.isOpenGiftCard == 1 && !isApp && assetManagementShowItem('AS_COINS')" @click="clickGiftCard">
          <div class="c-fs26 c-fw-b c-fc-xblack">{{modeleMapInfo.giftCardCoin}}</div>
          <div class="c-fs20 c-pt12">{{giftCardName}}</div>
        </div>
        <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1" @click="clickMyValueVoucher" v-if="((!isiOS && !isAnApp) || memberInfo.enableCoupon == 1) && companyAuth.enableRedeemCode && modeleMapInfo.enableRedeemCode && assetManagementShowItem('AS_COUPONS') && !$isStore()">
          <div class="c-fs26 c-fw-b c-fc-xblack">{{modeleMapInfo.couponCount}}</div>
          <div class="c-fs20 c-pt12">优惠券</div>
        </div>
        <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1" :class="!assetManagementShowItem('AS_COLLECTION') && !assetManagementShowItem('AS_POINTS') && !assetManagementShowItem('AS_COINS') && !assetManagementShowItem('AS_COUPONS') ? '' : 'bd-bd1-gray'" @click="clickScholarship" v-if="!hideRecord && ((!isiOS && !isAnApp) || memberInfo.enableScholarship == 1) && modeleMapInfo.enableRedeemCode && assetManagementShowItem('AS_ACCOUNT')">
          <div class="c-fs26 c-fw-b c-ws-n c-fc-xblack"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{accountBalance(modeleMapInfo.balance)}}</div>
          <div class="c-fs20 c-pt12">账户</div>
        </div>
      </div>
      <!-- 推荐好友 -->
      <div class="c-hh132 c-br16 c-mb20" @click="clickRecommend" v-if="!isYouke && recId && companyAuth.enableRecommend == 1">
        <img src="../../../assets/i/wap/recommend/banner-gift.png" class="c-w100 c-h c-br16" />
      </div>
      <!-- 我的订单 -->
      <div class="c-fs20 c-bg-white c-br16 c-pb34 c-mb20" v-if="isShowOrder">
        <div class="c-flex-row c-justify-sb c-aligni-center c-pt28 c-ph20" @click="clickOrder">
          <div class="c-fs24 c-fw-b c-fc-xblack">我的订单</div>
          <div class="c-fc-sblack">全部订单<span class="iconfont c-fs20">&#xe635;</span></div>
        </div>
        <div class="c-flex-row c-pt34">
          <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1 c-p" @click="payments">
            <i class="iconfont c-fs36 c-fc-xblack">&#xe67e;</i>
            <div class="c-fs20 c-pt8">待付款</div>
            <circle-count v-if="memberInfo && memberInfo.orderCount && memberInfo.orderCount.unpaidCount" :count="memberInfo.orderCount.unpaidCount" :coordinate="[1.85, -0.1]" :maxShowNumber="true"></circle-count>
          </div>
          <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1 c-p" @click="waitSend">
            <i class="iconfont c-fs36 c-fc-xblack">&#xe8d1;</i>
            <div class="c-fs20 c-pt8">待发货</div>
            <circle-count v-if="memberInfo && memberInfo.orderCount && memberInfo.orderCount.paidCount" :count="memberInfo.orderCount.paidCount" :coordinate="[1.85, -0.1]" :maxShowNumber="true"></circle-count>
          </div>
          <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1 c-p" @click="waitReceive">
            <i class="iconfont c-fs36 c-fc-xblack">&#xe60c;</i>
            <div class="c-fs20 c-pt8">待收货</div>
            <circle-count v-if="memberInfo && memberInfo.orderCount && memberInfo.orderCount.waitTakeCount" :count="memberInfo.orderCount.waitTakeCount" :coordinate="[1.85, -0.1]" :maxShowNumber="true"></circle-count>
          </div>
          <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1 c-p" @click="waitAppraise">
            <i class="iconfont c-fs36 c-fc-xblack">&#xe772;</i>
            <div class="c-fs20 c-pt8">待评价</div>
            <circle-count v-if="memberInfo && memberInfo.orderCount && memberInfo.orderCount.commentCount" :count="memberInfo.orderCount.commentCount" :coordinate="[1.85, -0.1]" :maxShowNumber="true"></circle-count>
          </div>
          <div class="c-flex-column c-aligni-center c-justify-center c-cursor-p c-w0 c-flex-grow1 c-p" @click="service" v-if="companyAuth.enableMallModule == 1">
            <i class="iconfont c-fs36 c-fc-xblack">&#xe75a;</i>
            <div class="c-fs20 c-pt8">退款/售后</div>
            <circle-count v-if="memberInfo && memberInfo.orderCount && memberInfo.orderCount.refundCount" :count="memberInfo.orderCount.refundCount" :coordinate="[1.85, -0.1]" :maxShowNumber="true"></circle-count>
          </div>
        </div>
      </div>
      <!-- 学习中心 -->
      <div class="c-flex-row c-justify-sb c-aligni-center c-pv28 c-bg-white c-mb20 c-br16 c-ph20" @click="clickLearnCenter" v-if="isShowStudy">
        <div class="c-fs24 c-fw-b c-fc-xblack">学习中心</div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-fc-sblack">累计学习
          <div v-if="formateH(modeleMapInfo.totalLearningTime) > 0"><span class="theme-fc c-pl4 c-fw-b">{{formateH(modeleMapInfo.totalLearningTime)}}</span><span>小时</span></div>
          <div><span class="theme-fc c-pl4 c-fw-b">{{formateM(modeleMapInfo.totalLearningTime)}}</span><span >分钟</span></div>
          <span class="iconfont c-fs20">&#xe635;</span>
        </div>
      </div>
      <div v-if="isiOS" v-show="enableIosRecharge" class="c-flex-row c-justify-sb c-aligni-center c-pv28 c-bg-white c-mb20 c-br16 c-ph20" @click="goRecharge()">
        <div class="c-fs24 c-fw-b c-fc-xblack">充值中心</div>
        <span class="iconfont c-fs20 c-fc-gray">去充值&#xe635;</span>
      </div>
      <!-- 学习工具等模块 -->
      <member-index-full-color :personalModuleList="personalModuleList" :memberInfo="memberInfo" :promotedAccount="promotedAccount"></member-index-full-color>
      <div v-if="showShopDetail" @click="clickMyShopInfo" class="c-hh92 c-flex-row c-justify-sb c-aligni-center c-ph34 c-bg-white c-br16">
        <div class="c-fs24 c-fc-xblack c-fw600">店铺信息</div>
        <div class="c-fs20 c-fc-sblack iconfont">&#xe635;</div>
      </div>
      <!-- 赠送礼包 -->
      <vip-present-com :gift="addMemberGift" :showPresent="showPresent" @closePresent="closePresent"></vip-present-com>
      <div class="c-hh20 c-w100 c-bg-sgray">
      </div>
    </div>
  </div>
</template>

<script>
import { memberIndexMixin } from "@/mixin/memberIndex.js";
import memberBasic from "./memberBasic.vue";
import memberIndexFullColor from "./memberIndexFullColor.vue";
import circleCount from "@/components/templates/common/circleCount.vue"
import vipPresentCom from "@/components/templates/common/vipPresentCom.vue";
export default {
  name: "MemberIndex",
  mixins: [memberIndexMixin],
  components: {
    memberBasic,
    memberIndexFullColor,
    circleCount,
    vipPresentCom
  },
  props: {},
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      userHeadImg: localStorage.getItem("userHeadImg"),
      userName: localStorage.getItem("userName"),
    };
  },
  watch: {},
  created() { },
  mounted() { },
  computed: {},
  methods: {},
  activated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.invite {
  background: linear-gradient(180deg, #FFAA79 0%, #FF5C41 100%);
}
.bd-bd1-gray {
  border-left: 1px solid #EBE9E9;
}
</style>
